<template>
    <div class='app-content customer-registration recevie-record'>
        <div class="app-view">
            <van-field 
                v-model="form.date"
                placeholder="请选择日期"
                readonly
                @click="calendarShow=true"
            >
                <template #left-icon>
                    <i class="iconfont icon-rili"></i>
                </template>
                <template #right-icon>
                    <i class="iconfont icon-arrow-down"></i>
                </template>
            </van-field>
        </div>
        <div class="app-view app-view-flex">
            <div class="search-area">
                <van-search
                    v-model="value"
                    left-icon=""
                    right-icon="search"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    :clearable="false"
                >
                </van-search>
                <tags 
                    v-model="tagId"
                    :data="tags"
                ></tags>
            </div>
            <div class="record-staff-list">
                <div class="list">
                    <div class="item" v-for="(item,index) in staffs" :key="index" @click="navigate">
                        <div class="left">
                            <avatar class="avatar" :src="item.image"></avatar>
                            <div class="con">
                                <div class="name">{{item.name}}</div>
                                <div class="sub">{{item.team}}</div>
                            </div>
                        </div>
                        <div class="right">
                            <span>Ta的接待记录</span>
                            <i class="iconfont icon-jiantou"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-calendar 
            :color="calendarTheme"
            v-model="calendarShow" 
            @confirm="onConfirm"
            get-container="body"
        />
    </div>
</template>

<script>
import {mapGetters} from "vuex"
import avatar from "@/components/Avatar/index.vue"
import Tags from "@/components/Tags/index.vue"
import colors from "@/style/theme/colors.json"
export default {
    name: '',
    data() { 
        return {
            calendarShow:false,
            value:"",
            form:{},
            tagId:"1",
            tags:[
                {
                    id:"1",
                    label:"北京销售团队"
                },
                {
                    id:"2",
                    label:"北京代理团队"
                },
                {
                    id:"3",
                    label:"北京精英团队"
                }
            ],
            staffs:[
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                },
                {
                    image:require("@/assets/images/photo.png"),
                    name:"陈怡君",
                    team:"北京销售团队"
                }
            ]
        }
    },
    props: {

    },
    computed:{
        ...mapGetters(['themeClass']),
        calendarTheme(){
            let color = colors[this.themeClass]['colors']['--calendarColor'];
            return color
        }
    },
    components:{
        avatar,
        Tags
    },
    mounted() {

    },
    methods:{
        onSearch(){

        },
        formatDate(date) {
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        },
        onConfirm(date) {
            this.calendarShow = false;
            this.$set(this.form,'date',this.formatDate(date));
        },
        navigate(){
            this.$router.push({
                path:"/record/detail"
            })
        }
    },
}
</script>

<style lang='scss' scoped>
.app-content{
    flex:1;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    .app-view-flex{
        flex:1;
        overflow: hidden;
        margin-bottom:0.5rem;
        display:flex;
        flex-direction: column;
    }
}
.recevie-record{
    margin-top:0.9rem;
}

.search-area{
    display:flex;
    align-items: center;
    padding:0.3rem 0.4rem;
    .van-search{
        width:4.4rem;
        margin-right:0.8rem;
        padding:0;
        box-sizing: content-box;
        .van-search__content{
            height:0.8rem;
            padding-left:0;
            /deep/.van-cell__value{
                line-height: normal;
                display:flex;
                flex-direction: column;
                justify-content: center;
                font-size:0.3rem;
            }
        }
    }
    .c-tags{
        flex:1;
    }
}
.record-staff-list{
    flex:1;
    overflow: hidden;
    .list{
        height:100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        .item{
            display:flex;
            align-items: center;
            justify-content: space-between;
            padding:0.6rem 0.8rem;
            position:relative;
            .left{
                display:flex;
                align-items: center;
                .avatar{
                    width:2.15rem;
                    height:2.15rem;
                    margin-right:0.6rem;
                }
                .con{
                    line-height: 1;
                    .name{
                        font-size:0.4rem;
                    }
                    .sub{
                        font-size:0.34rem;
                        color:#999;
                        margin-top:0.3rem;
                    }
                }
            }
            .right{
                display:flex;
                align-items: center;
                font-size:0.34rem;
                color:#999;
                .iconfont{
                    display:block;
                    transform: rotate(180deg);
                    font-size:0.4rem;
                    margin-left:0.2rem;
                }
            }
        }
        .item+.item{
            &:before{
                content:"";
                width:100%;
                height:1px;
                background-color:#e5e5e5;
                position:absolute;
                left:0;
                top:0;
                transform: scaleY(0.5);
                transform-origin: center top;
            }
        }
    }
}
</style>